import React from 'react';
import { Item, ItemPanel } from 'gg-editor';
import styles from '@/pages/Dialog/Add/dialogItem.less';
import { Card } from 'antd';

const DialogItem = () => {
  return (
    <ItemPanel className={styles.itemPanel}>
      <Item
        className={styles.item}
        model={{
          color: '#FEC679',
          label: '开始',
          des: '进入会话模块用来设置用户输入什么问题时会触发该多轮对话',
          title: '开始模块',
          modal: 'start',
          width: 90,
          height: 48,
          type: 'startNode',
          size: [90, 48],
          style: {
            radius: 25,
            fill: '#FFF3E9',
          },
          labelCfg: {
            style: {
              fill: '#575554',
            },
          },
        }}
      >
        <img src={staticPath+"/ggeditor/flow/start.png"} width="80" height="48" draggable={false} />
      </Item>
      <Item
        className={styles.item}
        model={{
          color: '#89C997',
          label: '收集词槽',
          des:
            '收集词槽模块用来设置让机器人主动询问并收集词槽信息。比如询问用户的姓名、手机号、出发城市、出发时间等',
          title: '收集词槽模块',
          width: 90,
          height: 48,
          modal: 'slot',
          type: 'centerNode',
          size: [90, 48],
          style: {
            radius: 5,
            fill: '#E5FFD8',
          },
          labelCfg: {
            style: {
              fill: '#575554',
            },
          },
        }}
      >
        <img src={staticPath+'/ggeditor/flow/collect.png'} width="80" height="48" draggable={false} />
      </Item>
      <Item
        className={styles.item}
        model={{
          color: '#FF6975',
          label: '信息确认',
          des:
            '信息确认模块用来和用户确认某些已经收集到或查询到的信息（比如订单信息），用户确认后跳出该模块继续进行后续的流程',
          title: '信息确认模块',
          width: 90,
          height: 48,
          modal: 'confirm',
          type: 'centerNode',
          size: [90, 48],
          style: {
            radius: 5,
            fill: '#FFEDEE',
          },
          labelCfg: {
            style: {
              fill: '#575554',
            },
          },
        }}
      >
        <img src={staticPath+'/ggeditor/flow/information.png'} width="80" height="48" draggable={false} />
      </Item>
      <Item
        className={styles.item}
        model={{
          color: '#44E1D6',
          label: '内容筛选',
          des:
            '内容筛选模块用来让用户从系统查询得到的多条数据中（比如机票或者商品等），进行多条件、多维度的筛选，最终选择一条自己需要的数据',
          title: '内容筛选模块',
          width: 90,
          height: 48,
          modal: 'filter',
          type: 'centerNode',
          size: [90, 48],
          style: {
            radius: 5,
            fill: '#E8FFFB',
          },
          labelCfg: {
            style: {
              fill: '#575554',
            },
          },
        }}
      >
        <img src={staticPath+'/ggeditor/flow/screen.png'} width="80" height="48" draggable={false} />
      </Item>
      <Item
        className={styles.item}
        model={{
          color: '#E0D652',
          label: '触发条件',
          des: '触发条件模块用来设置，当会话满足了设定的条件时则进入该模块下面的处理流程。',
          title: '触发条件模块',
          width: 94,
          height: 48,
          modal: 'case',
          type: 'caseNode',
          size: [90, 48],
          style: {
            fill: '#FFFCDA',
          },
          labelCfg: {
            style: {
              fill: '#575554',
            },
          },
        }}
      >
        <img src={staticPath + '/ggeditor/flow/trigger.png'} width="80" height="48" draggable={false} />
      </Item>
      <Item
        className={styles.item}
        model={{
          color: '#2C99FE',
          label: '动作',
          des: '动作模块用来设置，当进行到该模块时自动执行所设定的动作，包括回复用户、调用API接口和清空词槽值',
          title: '动作模块',
          width: 72,
          height: 72,
          modal: 'action',
          size: [72, 72],
          style: {
            radius: 36,
            fill: '#E8F7FF',
          },
          type: 'actionNode',
          labelCfg: {
            style: {
              fill: '#575554',
            },
          },
        }}
      >
        <img src={staticPath + '/ggeditor/flow/action.png'} width="72" height="72" draggable={false} />
      </Item>
      <Item
        className={styles.item}
        model={{
          color: '#B37FEB',
          label: '结束',
          des:
            '结束模块代表会话进行到该模块时即结束当前多轮对话，每个流程分支的终结点都必须为结束模块',
          title: '结束模块',
          width: 90,
          height: 48,
          modal: 'end',
          type: 'centerNode',
          size: [90, 48],
          style: {
            radius: 25,
            fill: '#F9F1FF',
          },
          labelCfg: {
            style: {
              fill: '#575554',
            },
          },
        }}
      >
        <img src={staticPath+'/ggeditor/flow/end.png'} width="80" height="48" draggable={false} />
      </Item>
    </ItemPanel>
  );
};

export default DialogItem;
